<template>
    <div>
        <!-- 播放器 -->
        <audio
            autoplay
            id="audio"
            preload="auto"
            :src="audioUrl2"
            @play="onPlay"
            @ended="onEnded"
            @pause="onPause">
        </audio>
        <p class="none" v-if="formData.length == 0">暂无数据</p>
        <div class="art flex" v-for="(item,index) in formData" :key="item.uid" v-else>
            <!-- 左边 -->
            <div class="left">
                <!-- 标题 -->
                <div class="title flex flex-y flex-between profile">
                    <!-- 头像 -->
                    <div class="flex flex-y">
                        <div class="pic">
                            <img :src="item.headImg" alt="头像">
                        </div>
                        <p class="name">{{item.accountName}}</p>
                    </div>
                    <!-- 时间 -->
                    <div class="flex flex-y">
                        <p class="none right30">{{filter_date(item.reviewDate)}}</p>
                        <el-button type="text">查看评论来源</el-button>
                    </div>
                </div>
                <!-- 语音 -->
                <div class="player" v-if="item.voice">
                    <div class="voice" @click="play(item.voiceUrl,index)" :class="{'play':!item.click,'pause':item.click}">
                        <span>语音播放</span>
                        <img src="@/assets/images/voice/pause.png" v-show="item.click">
                        <img src="@/assets/images/voice/play.png" v-show="!item.click">
                    </div>
                    <!-- <voice :url="item.voiceUrl"></voice> -->
                </div>
                <!-- 主内容 -->
                <div class="content" v-else>
                    <div v-if="item.content.indexOf('@@@',1) >= 0">
                        {{at(item.content)}}
                    </div>
                    <cmsConvert :data="item.content" v-else></cmsConvert>
                </div>
                <!-- 按钮组 -->
                <div class="btns flex flex-y">
                    <el-button
                        type="primary"
                        plain
                        size="small"
                        @click="handle(item,index)">下线</el-button>
                    <el-button
                        type="primary"
                        plain
                        size="small"
                        @click="getZan(item)">增加点赞数</el-button>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <page
            :total="pageTotal"
            @change="changePage"
            :sizes="pageSize"
            noSizes="total, prev, pager, next, jumper">
        </page>
        <!-- 图片预览 -->
        <cmsPreview :ifShow="ifShow" :url="url"></cmsPreview>
        <!-- 下线原因 -->
        <off
            :ifShow="ifOff"
            :formData="currentData"
            @httpSuccess="offSuccess"
            type="5">
            <!-- 1=动态,2=提问,3=文章,4=回答,5=评论 -->
        </off>
    </div>
</template>

<script>
import {formatDate} from '@/utils/formatDate.js'
import page from '@/components/public/Pagination'
import off from '@/components/content/off'
export default {
    props:["search","date"],
    components:{
        page,
        off
    },
    data () {
        return {
            // 图片预览
            ifShow:false,
            url:"",

            //拒绝
            list_reason:[
                {
                    value:"包含敏感词",
                    label:"包含敏感词"
                },
                {
                    value:"文章涉嫌抄袭",
                    label:"文章涉嫌抄袭"
                },
                {
                    value:"文章被投诉",
                    label:"文章被投诉"
                }
            ],

            //文章列表
            allData:[],
            formData:[],

            //弹窗
            index:"",
            ifOff:false,
            currentData:"",

            //分页
            pageTotal:"",
            pageNum: 1,
            pageSize:10, //后端写死了

            //语音
            playStatus:false,  //播放状态，true正在播放，false暂停/停止
            audioUrl2:"",
            flag:"",

            //other
            loading:true
        }
    },
    watch:{
        //搜索
        search(val){
            this.list();
        },
        //日期
        date(val){
            this.list();
        },
    },
    methods:{
        //列表
        list:function(){
            HTTP('comment_list', {
                searchParam:this.search,
            })
            .then(res=>{
                if(res.code == 200){
                    this.allData = res.data; //总数据，前端分页用到
                    this.allData.map(o=>{
                        if(o.voice){
                            this.$set(o,'click',false);
                        }
                    });
                    this.pageTotal = res.data.length; //总数
                    this.formData = this.allData.slice(0,this.pageSize); //取前3条
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //下线、上线、推荐、增加点赞数
        handle:function(type,userUid,uid,title,n){
            console.log(this.formData);
            let msg = type=='yes'?'通过':'拒绝';
            this.$confirm(`确定要${msg}该文章吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                //请求
                let reviewResult = this.formData[n].value_reason?this.formData[n].value_reason + ':':this.formData[n].value_note;
                HTTP('article_check', {
                    userUid:userUid,
                    uid:uid,
                    title:title,
                    status:type=='yes'?'1':'0',
                    reviewResult:type=='yes'?'':reviewResult
                })
                .then(res=>{
                    if(res.code == 200){
                        this.common.msg('操作成功');
                        this.formData.splice(n,1);
                        this.$emit('changeTotal',1);
                    }
                    else{
                        this.common.msg(res.msg,'error');
                    }
                })
            })
        },
        //下线、上线
        handle:function(obj,n){
            this.index = n;
            this.currentData = obj;
            this.ifOff = !this.ifOff;
        },
        //下线成功的回调
        offSuccess:function(){
            console.log('下线成功的回调');
            this.formData.splice(this.index,1);
            this.pageTotal--;
        },
        //获取点赞数
        getZan:function(obj){
            HTTP('robot_getZan')
            .then(res=>{
                if(res.code == 200){
                    this.$confirm(`根据参数配置，本次将增加点赞数${res.data.approvals}，增加浏览量${res.data.browses}`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        this.addZan(obj);
                    })
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //增加点赞数
        addZan:function(obj){
            HTTP('robot_addZan', {
                uid:obj.uid,
                contentType:5
            })
            .then(res=>{
                if(res.code == 200){
                    this.common.msg('操作成功');
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //改变分页
        changePage:function(obj){
            this.pageNum = obj.pageNum; //当前页
            if(obj.pageNum == 1){
                this.formData = this.allData.slice(0,this.pageSize);
            }
            else{
                let left = this.pageSize*(this.pageNum-1);
                let right = left + this.pageSize;
                this.formData = this.allData.slice(left,right);
            }
        },
        //@数据处理
        at:function(data){
            let arr = data.split('@@@：');
            return arr[1];
        },
        //时间戳转时间
        filter_date:function(time){
            let date = new Date(time*1000);
            return formatDate(date,'yyyy-MM-dd hh:mm:ss');
        },
        //语音点击事件
        play:function(url,n){
            var oAudio = document.getElementById('audio');
            this.flag = n;
			//新目标，播放
			if(this.audioUrl2 != url){
				console.log('新目标');
				//有播放的，让它暂停
				if(this.playStatus){
					console.log("有播放的，让它暂停");
					this.playStatus = false;
					oAudio.pause();
				}
				else{
					this.audioUrl2 = url;
                    this.wave(true);
					oAudio.play();
				}
			}
			//老目标，停止
			else{
                //如果正在播放中，让它停止
                if(this.playStatus){
                    console.log('如果正在播放中，让它停止');
                    this.playStatus = false;
                    oAudio.pause();
                    this.audioUrl2 = "";
                    this.wave(false); //关闭波纹
                }
                //如果已经暂停/停止，让它播放
                else{
                    console.log('如果已经暂停/停止，让它播放');
                    this.playStatus = true;
                    this.audioUrl2 = url;
                    oAudio.play();
                    this.wave(true); //开启波纹
                }
			}
        },
        //开启/结束波纹
        wave:function(bol){
            console.log('bol:' + bol);
            //先关闭所有波纹
            if(bol){
                this.formData.map(o=>{
                    if(o.click){
                        o.click = false;
                    }
                })
            }
            //开启/关闭
            this.formData[this.flag].click = bol;
        },
        //开始播放
        onPlay:function(res){
            this.playStatus = true;
            this.wave(true); //开启波纹
        },
        //播放结束
        onEnded:function(res){
            this.playStatus = false;
            this.wave(false); //关闭波纹
        },
        //暂停播放
        onPause:function(res){
            console.log('已停止');
            this.playStatus = false;
            this.wave(false); //关闭波纹
        },
    },
    mounted(){
        this.list();
    }
}
</script>

<style lang="scss" scoped>
    //滚动条
    /deep/.el-scrollbar__wrap{
        overflow-x: hidden;
    }
    .art{
        width: 100%;
        border-bottom: 1px solid #DDDDDD;
        padding: 20px 20px 40px 20px;
        margin-bottom: 20px;
        .left{
            width: 100%;
            margin-right: 20px;
            position: relative;
            .header{
                max-width: 450px;
            }
            .tag{
                margin-left: 10px;
            }
            .profile{
                padding: 10px 0;
                .pic{
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        width: 100%;
                        min-height: 25px;
                    }
                }
                .name{
                    color: #999;
                    margin-left: 12px;
                    font-size: 14px;
                }
            }
            .player{
                width: 100%;
                min-height: 60px;
                padding: 10px 0 60px 0;
            }
            .content{
                width: 100%;
                min-height: 60px;
                padding: 10px 0 60px 0;
				word-break:break-all;
                // v-html的样式
                /deep/ img{
                    display: none;
                }
            }
            .btns{
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }
    }
    //语音
    .voice{
        display: flex;
        align-items: center;
        width: 100px;
        cursor: pointer;
        img{
            width: 22px;
            margin-left: 6px;
        }
    }
    .play{
        span{
            color: #3399FF;
        }
    }
    .pause{
        span{
            color: #F5A623;
        }
    }
</style>
